import useAmis from '@/hooks/useAmis';
import {
  bindData,
  createForm,
  createResourceCrudTable,
  createResourceCrudTableBase, makeCreateButton, makeDeleteApi, makeDetailApi,
  makeDrawerButtonBase, makeEditButton, makeInsertApi, makeListApi, makeUpdateApi,
} from '@/utils/amisUtils';
import useElectron from "@/hooks/useElectron.tsx";
import useReq from "@/hooks/useReq.tsx";
import * as R from 'ramda';


const attrDetailColumns = [
  {
    'type': 'input-text',
    'name': 'name',
    'label': '属性名',
    'value': "${productId ? name : ''}",
  },
]

const optionDetailColumns = [
  {
    'type': 'input-text',
    'name': 'name',
    'label': '选项名',
    'value': "${productId ? name : ''}",
  },
]

const skuDetailColumns= [
  {
    "name": "optionIdList",
    "type": "chained-select",
    "label": "SKU选项",
    "source": {
      method: "post",
      url: `/api/v1/productAttrOption/getOptionsByLevel`,
      data: {
        productId: '${productId}',
        level: "${level}",
      },
    },
  },
  {
    'type': 'input-text',
    'name': 'name',
    'label': '产品标题',
    'value': "${productId ? name : ''}",
  },
  {
    "type": "input-number",
    "name": "price",
    "label": "价格",
    "precision": 2,
    "step": 0.1,
    "unitOptions": [
      "RMB",
    ]
  },
  {
    'type': 'input-image',
    'name': 'images',
    "receiver": "/api/v1/files/upload",
    autoUpload: false,
    'label': '产品图',
    "multiple": true,
    "draggable": true
  },
  {
    'type': 'textarea',
    'name': 'otherDetail',
    'label': '其他信息',
    'value': "${productId ? name : ''}",
  },
]


const Page = () => {
  const {spider1688} = useElectron();
  const {request} = useReq();
  const json = createResourceCrudTable({
    resourceName: 'product2',
    tableBtnList: [
      {
        "label": "爬取1688",
        "type": "button",
        "actionType": "drawer",
        "drawer": {
          title: "爬取1688",
          overlay: true,
          showCloseButton: false,
          body: {
            "type": "form",
            "body": [
              {
                'type': 'textarea',
                'name': 'url',
                'placeholder': '目前只支持一个URL',
                'label': '1688链接',
              }
            ],
            onEvent: {
              submit: {
                actions: [
                  {
                    "script": async (_1: object, _2: object, event: { data: { url: string } }) => {
                      const url = event.data.url;
                      if (!url || !url.startsWith('https://detail.1688.com/')) {
                        throw new Error('目前只支持1688链接');
                      }
                      const resp: Record<string, string> = await spider1688(url);
                      await request('/api/v1/product2/importFrom1688', {
                        method: 'POST',
                        data: resp
                      })
                    },
                    "actionType": "custom"
                  },
                ]
              }
            }
          }
        }
      },
    ],
    detailColumns: [
      {
        'type': 'input-text',
        'name': 'name',
        'label': '产品名',
      },
      {
        "type": "input-tag",
        "name": "tags",
        "label": "标签",
        "placeholder": "请选择标签",
        "options": [
          "重要",
          "待办",
          "关注",
        ]
      },
      {
        'type': 'input-image',
        'name': 'mainImage',
        "receiver": "/api/v1/files/upload",
        autoUpload: false,
        'label': '产品图',
        "multiple": true,
        "draggable": true
      },
      {
        'type': 'input-text',
        'name': 'basePrice',
        'label': '价格区间',
      },
      {
        'type': 'input-text',
        'name': 'unit',
        'label': '单位',
      },
      {
        "type": "json-schema",
        "name": "specDetail",
        "label": "产品属性",
        "schema": {
          "type": "array",
          "title": "属性",
          "items": {
            "type": "object",
            "properties": {
              "name": "string",
              "value": "string"
            }
          },
        }
      },
      {
        'type': 'input-rich-text',
        'name': 'intro',
        'label': '产品描述',
        "receiver": "/api/v1/files/upload",
        "value": "<p></p><p></p><p></p><p></p><p></p>",
        "options": {
          "menubar": false,
        }
      },
      {
        "type": "input-file",
        "name": "files",
        "label": "资质文件",
        "accept": "*",
        "receiver": "/api/v1/files/upload",
        "multiple": true,
        "joinValues": false,
        autoUpload: false,
        "onEvent": {
          "success": {
            "actions": [
              {
                "actionType": "toast",
                "args": {
                  "msgType": "info",
                  "msg": "「${event.data.path}」上传成功"
                }
              }
            ]
          }
        }
      },
    ],
    itemColumns: [
      {
        'name': 'name',
        'label': '产品名',
        "width": 350,
        'searchable': {
          'type': 'input-text',
          'placeholder': '请输入',
          'mode': 'horizontal',
        },
      },
      {
        'name': '${DECODEJSON(mainImage)[0]}',
        'label': '产品主图',
        'type': 'image',
        "enlargeAble": true
      },
    ],
    actionBtnList: [
      makeDrawerButtonBase({
        btnText: 'SKU选项',
        body: createResourceCrudTableBase({
          listApi: R.mergeDeepRight(makeListApi('productAttr'), {data: {productId: "${id}"}}),
          deleteApi: makeDeleteApi('productAttr'),
          tableBtnList: [
            makeCreateButton({
              insertApi: R.mergeDeepRight(makeInsertApi('productAttr'), {data: { productId: "${id}" }}),
              detailColumns: attrDetailColumns
            }),
          ],
          actionBtnList: [
            makeEditButton({
              detailApi: makeDetailApi('productAttr'),
              updateApi: makeUpdateApi('productAttr'),
              detailColumns: attrDetailColumns
            }),
            makeDrawerButtonBase({
              btnText: '配置选项',
              body: createResourceCrudTableBase({
                listApi: R.mergeDeepRight(makeListApi('productAttrOption'), {data: {productAttrId: "${id}"}}),
                deleteApi: makeDeleteApi('productAttrOption'),
                tableBtnList: [
                  makeCreateButton({
                    insertApi: R.mergeDeepRight( makeInsertApi('productAttrOption'), {data: { productAttrId: "${id}" }}),
                    detailColumns: optionDetailColumns
                  }),
                ],
                actionBtnList: [
                  makeEditButton({
                    detailApi: makeDetailApi('productAttrOption'),
                    updateApi: makeUpdateApi('productAttrOption'),
                    detailColumns: optionDetailColumns
                  })
                ],
                itemColumns: [
                  {
                    'name': 'name',
                    'label': '选项名',
                    'searchable': {
                      'type': 'input-text',
                      'placeholder': '请输入',
                      'mode': 'horizontal',
                    },
                  },
                ],
              })
            })
          ],
          itemColumns: [
            {
              'name': 'name',
              'label': '属性名',
              'searchable': {
                'type': 'input-text',
                'placeholder': '请输入',
                'mode': 'horizontal',
              },
            },
          ],
        })
      }),
      makeDrawerButtonBase({
        btnText: 'SKU列表',
        body: bindData({
          schema: createResourceCrudTableBase({
            listApi: R.mergeDeepRight(makeListApi('productSku'), {data: {productId: "${id}"}}),
            deleteApi: makeDeleteApi('productSku'),
            tableBtnList: [
              makeDrawerButtonBase({
                btnText: '新增',
                body: bindData({
                  schema: createForm({
                    initApi: null,
                    updateApi: R.mergeDeepRight( makeInsertApi('productSku'), {data: { productId: "${id}" }}),
                    detailColumns: skuDetailColumns}),
                  data: { productId: "${id}" }
                }),
              })
            ],
            actionBtnList: [
              makeDrawerButtonBase({
                btnText: '编辑',
                body: createForm({
                  initApi: makeDetailApi('productSku'),
                  updateApi: makeUpdateApi('productSku'),
                  detailColumns: skuDetailColumns}),
              }),
            ],
            itemColumns: [
              {
                'name': 'name',
                'label': '标题',
                'searchable': {
                  'type': 'input-text',
                  'placeholder': '请输入',
                  'mode': 'horizontal',
                },
              },
              {
                'name': 'price',
                'label': '价格',
              },
            ],
          }),
          data: { productId: "${id}" }
        })
      })
    ],
  })

  const AmisComponent = useAmis({
    'type': 'page',
    'id': 'ppp',
    'data': {
      selectData: [
        {label: '选项1', value: '1'}, {label: '选项2', value: '2'}
      ]
    },
    'body': [
      json,
    ]
  });

  return (
    <div>
      <AmisComponent/>
    </div>
  );
}
export default Page;